<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="成为会员"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <div class="vip-img-box">
                <img
                    class="vip-img"
                    src="@/assets/images/experience/98-vip-img.jpg"
                />
            </div>

        </common-scroll>
        <!-- 共用页面滚动组件 -->

        <div
            class="be-vip-btn"
            @click="beMember"
        >成为会员</div>

        <!-- 绑定手机组件 -->
        <bind-phone
            :bindPhone="bindPhone"
            @closeBindPhone="closeBindPhone"
            @updateUserInfo="updateUserInfo"
        ></bind-phone>
        <!-- 绑定手机组件 -->
    </div>
</template>

<script>
import CommonScroll from '@/components/Scroll'
import CommonHeader from '@/components/Header'
import BindPhone from '@/components/BindPhone'
export default {
    name: 'Experience2',
    components: {
        CommonHeader,
        CommonScroll,
        BindPhone
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '1.33rem',
                background: '#fff'
            },
            userInfo: '',
            bindPhone: false
        }
    },
    mounted() {
        this.getUserInfo()
    },
    methods: {
        getUserInfo() {
            this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        },
        updateUserInfo() {
            this.getUserInfo()
        },
        beMember() {
            const that = this
            if (
                this.userInfo.mobile_phone == null ||
                this.userInfo.mobile_phone == ''
            ) {
                this.bindPhone = true
            } else {
                this.axios.post('/api/v2/vip/up_level_1.json').then(res => {
                    const data = res.data
                    if (data.status == 1) {
                        this.commonDialog.alert(
                            '提示',
                            '恭喜您成为百领商城普通会员！',
                            function() {
                                that.$router.go(-1)
                            }
                        )
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
            }
        },
        closeBindPhone() {
            this.bindPhone = false
        }
    }
}
</script>

<style lang="stylus" scoped>
.vip-img
    width 100%
.be-vip-btn
    position absolute
    bottom 0
    left 0
    right 0
    line-height 1.33rem
    text-align center
    background #d7463c
    font-size 0.38rem
    color #fff
</style>

